.app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #3498db;
  .pacman {
    left: 50%;
    top: 50%;
    margin-top: -32px;
    margin-left: -24px;
    position: absolute;
    .tool {
      &:nth-of-type(1) {
        width: 0;
        height: 0;
        border: 24px solid rgb(255, 255, 255);
        border-right-color: transparent;
        border-radius: 24px;
        animation: rotate_pacman_half_up 0.5s 0s infinite;
        position: relative;
        left: -24px;
      }
      &:nth-of-type(2) {
        width: 0;
        height: 0;
        border: 24px solid rgb(255, 255, 255);
        border-right-color: transparent;
        border-radius: 24px;
        animation: rotate_pacman_half_down 0.5s 0s infinite;
        margin-top: -48px;
        position: relative;
        left: -24px;
      }
      &:nth-of-type(n+3) {
        background-color: rgb(255,255,255);
        border-radius: 100%;
        margin: 16px;
        width: 16px;
        height: 16px;
        position: absolute;
        transform: translate(0, -6.25px);
        top: 6.4px;
        left: 67.2px;
      }
      &:nth-of-type(3) {
        animation: pacman-balls 1s -0.66s infinite linear;
      }
      &:nth-of-type(4) {
        animation: pacman-balls 1s -0.33s infinite linear;
      }
      &:nth-of-type(5) {
        animation: pacman-balls 1s 0s infinite linear;
      }
    }
  }
}

@keyframes rotate_pacman_half_up {
  0% { transform: rotate(270deg); }
  50% { transform: rotate(360deg); }
  100% { transform: rotate(270deg); }
}
@keyframes rotate_pacman_half_down {
  0% { transform: rotate(90deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}
@keyframes pacman-balls {
  75% { opacity: 0.7; }
  100% { transform: translate(-100px, -6.25px); }
}
